<template>
  <div>
  <div class="crumbs">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>
        <i class="el-icon-lx-cascades"></i> 文件分析结果
      </el-breadcrumb-item>
    </el-breadcrumb>
    </div>
    <div class="container" style="width: 900px;height:900px;">
      <div class="handle-box" v-show="distributionVisible">
        <el-table :data="distributionData" border class="table"  header-cell-class-name="table-header">
          <el-table-column label="字段值">
            <template #default="scope"><span>{{ scope.row.key }}</span></template>
          </el-table-column>
          <el-table-column label="统计值">
            <template #default="scope"><span>{{ scope.row.statistical }}</span></template>
          </el-table-column>
          <el-table-column label="分布">
            <template #default="scope"><span>{{ scope.row.distribution }}</span></template>
          </el-table-column>
        </el-table>
      </div>
      <div class="handle-box" v-show="ScatterVisible" id="echarts_box" style="width: 100%;height:100%;">

      </div>
    </div>
  </div>
</template>

<script>
import {ref} from "vue";
import {ElMessageBox} from "element-plus";
import {useRoute} from "vue-router";
import {useRouter} from "vue-router";
import * as echarts from 'echarts';
import 'echarts-gl';

export default {
  name: "FileAnalysis",
  setup(){
    let fieldIds="";
    let funcId="";
    let distributionData=[];
    let distributionVisible=false;
    let ScatterVisible=false;

    const transferData=(res,d)=>{
      let ans=[];
      let size=0;
      for (var key in res){
        size=res[key].length;
        break;
      }
      for (var i=0;i<size;i++){
        let list=[];
        for (var key in res){
          list.push((res[key])[i]);
        }
        ans.push(list);
      }
      return ans;
    };

    const paint_2d=(res,fields)=>{
      var data=transferData(res,2);
      console.log(data);

      var chartDom = document.getElementById('echarts_box');
      var myChart = echarts.init(chartDom);
      var option = {
        xAxis: {},
        yAxis: {},
        series: [
          {
            symbolSize: 10,
            data: data,
            type: 'scatter'
          }
        ]
      };
      option && myChart.setOption(option);
    };

    const paint_3d=(res,fields)=> {
      var data=transferData(res,3);
      console.log(data);
      var chartDom = document.getElementById('echarts_box');
      var myChart = echarts.init(chartDom,'light');
      var option = {
        grid3D: {},
        xAxis3D: {},
        yAxis3D: {},
        zAxis3D: {},
        series: [{
          symbolSize: 10,
          type: 'scatter3D',
          data: data
        }]
      };
      option && myChart.setOption(option);
    };

    const getAnalysisData = () =>{
      const route=useRoute();
      if (route.query.fieldIds!=null) fieldIds=route.query.fieldIds;
      if (route.query.funcId!=null) funcId=route.query.funcId;

      console.log(fieldIds)
      console.log(funcId)
      if (funcId=="1") {
        distributionVisible=true;
      }else {
        ScatterVisible=true;
      }

      analysisFile(fieldIds,funcId).then(res=>{
          console.log(res.data)
          if (res.status!=200){
            ElMessageBox.confirm("分析产生错误，请检查您的分析方法和字段选择是否合理", "错误", {
              type: "error",
            }).then(()=>{
                //todo:回到上一界面
              router.back();
              })
              .catch(() => {});
          }else {
            //todo:
            var fieldArr=(JSON.parse(fieldIds));
            switch(funcId){
              case "1":
                var id=fieldArr[0];
                var str1=id+"_distribution";
                var str2=id+"_statistical";
                //console.log(str1);
                //console.log(str2);
                var distr=res.data[str1];
                var statis=res.data[str2];
                console.log(distr);
                console.log(statis);
                for (var key in statis){
                  var value1=statis[key];
                  var value2=distr[key];
                  distributionData.push({key:key,statistical:value1,distribution:value2});
                }
                console.log(distributionData);
                break;
              case "2":
                var size=fieldArr.length;
                console.log(size);
                switch (size){
                  case 1:
                    break;
                  case 2:
                    paint_2d(res.data,fieldArr);
                    break;
                  case 3:
                    paint_3d(res.data,fieldArr);
                    break;
                }
                break;
            }
          }
      });
    };

    getAnalysisData();

    return {
      fieldIds,
      funcId,
      ScatterVisible,
      distributionVisible,
      distributionData,
      getAnalysisData,
    }
  },
};
</script>

<style scoped>
.container{
  margin-top: 10px;
  margin: 0 auto;
}
.handle-box {
  margin-bottom: 20px;
}
</style>
